<template>
  <n-flex vertical style="height: 100%">
    <div class="top">
      <n-h3 class="title"> 生字查询</n-h3>
      <n-input
          v-model:value="text"
          style="width: 500px; margin-top: 20px"
          size="large"
          placeholder="请输入汉字"
          @keydown.enter="onSearch"
          :maxlength="1"
          @update-value="changeText"
      >
        <template #suffix>
          <n-icon
              @click="onSearch"
              :component="Search"
              class="cursor-pointer"
          ></n-icon>
        </template>
      </n-input>
    </div>
    <n-flex style="flex: 1">
      <div class="font">
        <p class="font-text">{{ text }}</p>
      </div>
      <div class="details">
        <n-h3 class="title-info">生字详解</n-h3>
        <n-scrollbar style="max-height: 510px">
          <div class="details-content">
            <n-descriptions label-placement="left" :column="4" separator=":">
              <n-descriptions-item label="汉字">
                {{ dictList?.hanzi || '-' }}
              </n-descriptions-item>
              <n-descriptions-item label="拼音">
                {{ dictList?.pinyin || '-' }}
              </n-descriptions-item>
              <n-descriptions-item label="部首">
                {{ dictList?.bushou || '-' }}
              </n-descriptions-item>
              <n-descriptions-item label="笔画">
                {{ dictList?.bihua || '-' }}
              </n-descriptions-item>
            </n-descriptions>
            <div class="details-text" style="margin-top: 5px">
              <div v-html="dictDetaiInfo"></div>
            </div>
          </div>
        </n-scrollbar>
      </div>
    </n-flex>
  </n-flex>
</template>

<script setup>
import {
  NScrollbar,
  NFlex,
  NH3,
  NInput,
  NIcon,
  NDescriptions,
  NDescriptionsItem,
} from 'naive-ui';
import {apiDict} from '@/common/api/index.js';
import {ref, onMounted, computed} from 'vue';
import {Search} from '@vicons/ionicons5';

const text = ref('');
const dictList = ref({});
const detailInfo = ref([]);

const dictDetaiInfo = computed(() => {
  if (!detailInfo.value?.length) return '-';
  let str = detailInfo.value.join();
  str = str.replace('义,', '义:');
  str = str.replace(/,\(/g, '。\(');
  return str;
});

function replaceAll(str, find, replace) {
  return str.replace(new RegExp(find, 'g'), replace);
}

const onSearch = async () => {
  try {
    dictList.value = {};
    let params = {
      text: text.value,
    };
    let res = await apiDict(params);
    dictList.value = res?.result || {};
    detailInfo.value = res?.result?.detail_explain;
  } catch (err) {
    console.log(err);
  }
};

const changeText = (e) => {
  if (!e) {
    dictList.value = {};
    detailInfo.value = [];
  } else {
    onSearch();
  }
};
const inventory = [
  {name: "芦笋", type: "蔬菜", quantity: 5},
  {name: "香蕉", type: "水果", quantity: 0},
  {name: "山羊", type: "肉", quantity: 23},
  {name: "樱桃", type: "水果", quantity: 5},
  {name: "鱼", type: "肉", quantity: 22},
];
const result = Object.groupBy(inventory, ({type}) => type);
console.log(result, '108')


onMounted(async () => {
});

const obj = {
  a: 'lichong',
};

console.log(obj.c);
</script>

<style lang="scss" scoped>
.top {
  height: 130px;
  padding: 30px 0 40px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #ccc;

  .title {
    text-align: center;
    font-size: 23px;
  }
}

.details {
  flex: 1;
  border-left: 1px solid transparent;
  background: linear-gradient(white, white) padding-box,
  repeating-linear-gradient(
          -45deg,
          #ccc 0,
          #a4a4a4 0.5em,
          white 0,
          white 0.75em
  );

  padding: 10px 20px;
}

.font {
  width: 40%;
  height: 100%;
  border-left: 1px solid transparent;
  background: url('../.././common/image/font-bg.png') no-repeat center center;
  background-size: 100%;
  font-family: '楷体', serif;
  display: flex;
  justify-content: center;
  align-items: center;

  .font-text {
    font-size: 240px;
    text-align: center;
    line-height: 1;
  }
}
</style>
